<template>
  <view
    v-if="isShow"
    class="dialog flex-center fadeInOpacity"
    :class="[isCloseAlert ? 'fadeOutOpacity' : '']"
    @click="maskClick(false)"
    @animationend="animationend"
  >
    <!-- 应用升级 -->
    <t-update-app
      v-if="props.extraData.type === 1"
      :data="props.extraData"
      @close="maskClick(true)"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onBackPress } from '@dcloudio/uni-app'

let backLocked: boolean = true
onBackPress(() => {
  return backLocked
})

enum Type {
  'APP升级' = 1
}

interface Props {
  maskCloseAble?: boolean
  extraData: {
    type: Type,
    [x: string]: any 
  }
}
let props = ref<Props>({
  maskCloseAble: true,
  extraData: {
    type: 1
  }
})

const isShow = ref<boolean>(false)
const isCloseAlert = ref<boolean>(false)
const show = (data: AnyObject = {}) => {
  isShow.value = true
  props.value = Object.assign(props.value, data)
}
const close = () => {
  if (isCloseAlert.value) {
    return
  }
  isCloseAlert.value = true
}
const animationend = () => {
  if (isCloseAlert.value) {
    isShow.value = false
    isCloseAlert.value = false
  }
}

// 蒙层点击事件
const maskClick = (forceClose: boolean) => {
  if ((props.value.maskCloseAble && props.value.extraData.type !== 1) || forceClose) {
    // #ifdef APP-PLUS
    backLocked = false
    uni.navigateBack()
    // #endif
    // #ifndef APP-PLUS
    close()
    // #endif
  }
}

onLoad(() => {
  // #ifdef APP-PLUS
  isShow.value = true
  props.value = Object.assign(props.value, getApp().globalData!.dialogData || {})
  // #endif
})

defineExpose({
  show,
  close
})
</script>

<style>
page {
  background: transparent;
  background-color: transparent;
}
</style>
<style lang="scss" scoped>
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.35);
}

.container {
  background-color: #fff;
}

.fadeInOpacity {
  -webkit-animation: fadeIn 0.5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation: fadeIn 0.5s;
}

.fadeOutOpacity {
  -webkit-animation: fadeOut 0.5s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation: fadeOut 0.5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
